<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../components/echarts-4.0.4.min.js"></script>
		<style>
			html,body{
				width: 100%;
				height: 100%;
				background:#0A0F23;
			}
			*{
				margin: 0;
				padding: 0;
			}
		</style>
	</head>

	<body>
		<div id="main" style="width: 100%;height: 100%;"></div>
	</body>
	<script>
		var myChart = echarts.init(document.getElementById('main'));
		
		option = {
		    backgroundColor: '#0A0F23',
		    title: {
		        text: "科创主体",
		        // top: "3%",
		        left: "center",
		        textStyle: {
		            color: "#FFF",
		            fontSize: 22
		        }
		    },
		    legend: {
		        data: ['企业', '个人', '机构', '高校',"院所"],
		        align: 'right',
		        right: '5%',
		        top:'5%',
		        textStyle: {
					color: '#fff',
					fontSize:'16'
				}
		    },
		    grid: {
		    	top:'15%',
		        left: '5%',
		        right: '5%',
		        bottom: '5%',
		        containLabel: true
		    },
		    color:['#336c9c','#8ce8e7','#62cff1','#4fac88','#67c47b','#67c47b'],
		    xAxis: [{
		        type: 'category',
		        data: ['北京', '上海', '广州', '西安'],
		        axisLine: {
		            lineStyle: {
		                color: '#fff'
		            }
		        },
		        axisLabel: {
					textStyle: {
						color: '#fff',
						fontSize: 16
					}
				}
		    }],
		    yAxis: [{
		        type: 'value',
		        name: '总价',
		        axisLabel: {
		            formatter: '{value}',
		            textStyle: {
						color: '#fff',
						fontSize: 16
					}
		        },
		        axisLine: {
					lineStyle: {
						color: '#fff',
					}  
				},
		    }],
		    series: [{
		        name: '企业',
		        type: 'bar',
		        data: [30, 26, 18, 11]
		    }, {
		        name: '个人',
		        type: 'bar',
		        data: [28, 20, 15, 9]
		    }, {
		        name: '机构',
		        type: 'bar',
		        data: [19, 14, 9, 5]
		    }, {
		        name: '高校',
		        type: 'bar',
		        data: [18, 16, 13, 3]
		    }, {
		        name: '院所',
		        type: 'bar',
		        data: [15, 12, 6, 2]
		    }]
		};
		
		myChart.setOption(option);
	</script>

</html>